<template>
	<view v-if="isShow" :class="classStr" :style="styleStr" @click="openVoiceCallWaiting">
		<view class="user-avatar">
			<image :src="avatar" mode="aspectFill"></image>
		</view>
		<view class="text">
			<view class="user-name text-ellipsis">{{ userName }}</view>
			<view class="msg text-ellipsis" v-if="msg.length > 0">{{ msg }}</view>
		</view>
	</view>
</template>

<script lang="ts">
	import { ref, defineComponent } from 'vue';
	import useStatusHeight from '@/hooks/useStatusHeight';

	import { useImStore } from '@/store';

	export default defineComponent({
		name: 'im-portant-toast',
		setup() {
			let ddPages = ['pages/index/index', 'video-play/video-play', 'pages/my/my']
			const statusHeight = useStatusHeight(); // 状态栏高度，用于计算toast距离顶部的距离
			const page = getCurrentPages();
			const isShow = ref(false); // 控制toast显示与隐藏的变量
			const classStr = ref("im-portant-toast");
			const styleStr = ref("");

			if (ddPages.includes(page[page.length - 1].route)) {
				styleStr.value = "margin-top:" + (statusHeight.navHeight);
			}

			const imStore = useImStore();
			const avatar = ref("")
			const userName = ref("")
			const userData = ref(null);
			const msg = ref("")
			const roomInfo : any = ref(null);



			uni.$on('on-im-portant-toast-show', async (roomInfo : any) => {
				let roomId = roomInfo.roomId.split("-");
				const res = await imStore.getConversationProfile('C2C' + roomId[1]);
				if (res.code == 0 && res.data.conversation) {
					avatar.value = res.data.conversation.userProfile.avatar;
					userName.value = res.data.conversation.userProfile.nick;
					userData.value = res.data.conversation.userProfile
					msg.value = "邀请您进行语音通话"
					isShow.value = true; // 显示toast
				}
			})
			uni.$on('on-im-portant-toast-close', () => {
				isShow.value = false; // 显示toast
				uni.$emit('close-voice-call-waiting')
			})
			const close = () => {

			}
			const openVoiceCallWaiting = () => {
				uni.$emit('open-voice-call-waiting', { avatar: avatar.value, userName: userName.value, roomInfo: roomInfo.value, userData: userData.value });
				isShow.value = false; // 隐藏toast
			}

			return {
				isShow,
				classStr,
				styleStr,
				avatar,
				userName,
				msg,
				roomInfo,
				openVoiceCallWaiting
			}
		},

	})
</script>

<style lang="scss" scoped>
	.im-portant-toast {
		position: fixed;
		top: 0;
		left: 24rpx;
		width: calc(100% - 24rpx - 24rpx - 24rpx - 24rpx);
		border-radius: 15rpx;
		z-index: 999;
		background-color: #FFF;
		padding: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between; // 添加这个属性，使文字和头像分列左右两边

		.user-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.text {
			width: calc(100% - 80rpx - 20rpx);

			.user-name {
				font-size: 28rpx;
				font-weight: bolder;
			}

			.msg {
				font-size: 26rpx;
			}
		}
	}
</style>